<template>
  <div class="container">
    <div class="topDiv">
      <p class="title p1">订单物流信息</p>
      <div class="logistics_info">
        <div class="info_title flexBetween">
          <div>
            <label class="" for="">物流公司：</label>
            <span>{{logisticsData.logistics_name || '无'}}</span>
          </div>
          <div>
            <label for="">物流单号：</label>
            <span>{{logisticsData.logistics_no || '无'}}</span>
          </div>
          <div>
            <label for="">物流状态：</label>
            <span>{{
            logisticsData.status == 0
              ? "其他"
              : logisticsData.status == 1
              ? "已发货"
              : logisticsData.status == 2
              ? "运输中" : "已签收"
            }}</span>
          </div>
        </div>
      </div>
      <div>
        <el-timeline :reverse="reverse">
          <el-timeline-item
            v-for="(item, index) in activities"
            :key="index"
            placement="top"
            :timestamp="item.time"
          >
            {{ item.context }}
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
    <div class="delivery">
      <div class="title flexBetween">
        <p class="p1">订单发货凭证</p>
        <p v-if="logisticsData.deliver_time" class="p1">发货时间：
          <span style="color: #666">{{logisticsData.deliver_time}}</span>
        </p>
      </div>
      
      <div class="flex imgDiv">
        <div v-for="(item,index) in deliver_imgList" :key="index" class="imgs">
          <img :src="baseUrl + item" alt="img" class="itemImg"/>
          <el-button size="medium" class="checkBtn check" @click="toView(1,item)">查看</el-button>
        </div>
      </div>
    </div>
    <div class="take_delivery">
      <div class="title flexBetween">
      <p class="p1">订单签收凭证</p>
        <p v-if="logisticsData.confirm_time" class="p1">签收时间：
          <span>{{logisticsData.confirm_time}}</span>
        </p>
      </div>
      <div class="flex imgDiv">
        <div v-for="(item,index) in confirm_imgList" :key="index" class="imgs">
          <img :src="baseUrl + item" alt=""  class="itemImg"/>
          <el-button size="medium" class="checkBtn check" @click="toView(2,item)">查看</el-button>
        </div>
      </div>
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="handleClose">
        <img :src="baseUrl + imgurl" alt="photo" class="dialogImg">
    </el-dialog>
  </div>
</template>


<script>
import { getProof } from "./index";
export default {
  data() {
    return {
      baseUrl: '',
      orderNo: '',
      reverse: true,
      logisticsData: {},
      activities: [],
      deliver_imgList: [],
      confirm_imgList: [],
      dialogTitle: '',
      imgurl: '',
      dialogVisible: false,
    };
  },
  created(){
    let jumpId = this.$route.query.orderNo
    this.orderNo = jumpId || '2021061110393635842'
  },
  methods: {
    getInfo() {
      getProof({ orderNo: this.orderNo }).then((res) => {
        this.logisticsData = res;
        this.deliver_imgList = res.deliver_images ? res.deliver_images.split(',') : []
        console.log('img', this.deliver_imgList)
        this.confirm_imgList = res.confirm_images ? res.confirm_images.split(',') : []
        this.activities = res.info ? JSON.parse(res.info).data : []
      });
    },
    toView(num,url){
      this.dialogVisible = true
      this.imgurl = url
      if(num==1){
        this.dialogTitle = "查看发货凭证"
      } else {
        this.dialogTitle = "查看签收凭证"
      }
    },
    handleClose(){
      this.dialogVisible = false
    }
  },
  mounted() {
    this.getInfo();
  },
};
</script>

<style lang="scss" scoped>
.container {
  margin: 0 auto;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  .topDiv {
    border: 1px solid #e6e6e6;
    margin-bottom: 30px;
  }
  .el-timeline-item {
    padding-bottom: 5px;
  }
  /deep/ .el-timeline-item__wrapper {
    display: flex;
    align-items: baseline;
  }
  /deep/ .el-timeline-item__timestamp.is-top{
    margin-right: 30px;
    min-width: 135px;
  }
  .delivery,
  .take_delivery {
    border: 1px solid #e6e6e6;
    margin-bottom: 30px;
  }
  .imgDiv{
    padding: 20px 30px;
    overflow: auto;
  }
  .imgs{
    margin-right: 30px;
    position: relative;
  }
  .itemImg {
    width: 120px;
    height: 120px;
    border-radius: 3px;
  }
  .checkBtn{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20%;
    line-height: 10px;
    border: none;
    background: #000000;
    opacity: 0.75;
    border-radius: 0;
    color: #fff;
    text-align: center;
    cursor: pointer;
    user-select:none;
  }
  .dialogImg{
    width: 100%;
  }
  @media screen and (min-width: 500px) {
    .title{
      background: #f5f5f5;
      border-bottom: 1px solid #e6e6e6;
      padding: 0 30px;
    }
    .p1 {
      margin: 0;
      font-size: 16px;
      line-height: 50px;
    }
    .flexBetween {
      display: flex;
      justify-content: space-between;
    }
    /deep/ .el-timeline{
      padding: 30px 80px 10px;
    }
    .logistics_info {
      padding: 0 100px;
    }
    .imgDiv{
      padding: 20px 30px;
    }
    .imgs{
      margin-right: 30px;
      position: relative;
    }
    .itemImg {
      width: 120px;
      height: 120px;
      border-radius: 3px;
    }
    .check{
      height: 30px;
      line-height: 10px;
    }
    .info_title {
      padding: 20px;
      font-size: 14px;
      line-height: 25px;
      border-bottom: 1px solid #e6e6e6;
    }
  }
  @media screen and (max-device-width: 650px) {
    .logistics_info {
      padding: 0 25px;
    }
    .info_title {
      padding: 10px 20px;
      font-size: 14px;
      line-height: 20px;
      border-bottom: 1px solid #e6e6e6;
    }
    .imgDiv{
      padding: 10px 15px;
    }
    .imgs{
      margin-right: 15px;
    }
    .itemImg {
      width: 80px;
      height: 80px;
      position: relative;
    }
    
    .title{
      background: #f5f5f5;
      border-bottom: 1px solid #e6e6e6;
      padding: 0 20px;
    }
    .p1 {
      margin: 0;
      font-size: 14px;
      line-height: 30px;
    }
    /deep/ .el-timeline{
      padding: 20px 16px 15px;
    }
    /deep/ .el-timeline-item__timestamp.is-top{
      margin-right: 10px;
      min-width: 135px;
    }
    .check{
      height: 25px;
      line-height: 7px;
    }
  }
}
</style>